<template>
	<view class="t_container"> 
        	<header class="t_header" >
            	<span>北斗环境监测平台</span>
        	</header>
        	<main class="t_main">
				<div class="top">
            		<div class="t_left_box">
                		<img class="t_l_line" src="/static/img/left_line.png" alt="">
                		<div class="t_mbox t_rbox">
                    		<i></i>
                    		<span>设备数量</span>
                    		<h2>{{d_num}}</h2>
                		</div>
                		<div class="t_mbox t_gbox">
                    		<i></i>
                    		<span>在线设备数</span>
                    		<h2>{{d_zx}}</h2>
                		</div>
                		<div class="t_mbox t_ybox">
                    		<i></i>
                    		<span>新增设备数</span>
                    		<h2>0</h2>
                		</div>
                		<img class="t_r_line" src="/static/img/right_line.png" alt="">
            		</div>
            		<div class="t_center_box">
                		<div class="t_bottom_box" @click="handclick">
                    		<img class="t_l_line" src="/static/img/left_line.png" alt="">
                    		<div id="chart_3" class="echart" style="width: 100%; height: 100%;"></div>
                    		<img class="t_r_line" src="/static/img/right_line.png" alt="">
                		</div>
            		</div>
            		<div class="t_right_box">
                    		<img class="t_l_line" src="/static/img/left_line.png" alt="">
                    		<div id="chart_4" @click="jh" class="echart" style="width: 50%; height: 4.6rem; position: absolute;"></div>
                    		<header class="t_b_h">
                        		<span>开关次数</span>
                        		<img src="/static/img/end.png">
                        		<h3>15<span>次</span></h3>
                    		</header>
                    		<main class="t_b_m">
                        		<div class="t_b_m_img" >
									<a style="font-size:0.15rem;color: #fff;position: absolute;top:8px;left:50px">数据更新时间:{{test[8]}}  {{test[9]}}</a>
								</div>
                        		<div class="t_b_box" @click="new_data('wd')">
                            		<span>溫度状态</span>
                            		<i></i>
                            		<h2 :style="{'color':color_data[0]}">{{test[2]}}℃</h2>
                        		</div>
                        		<div class="t_b_box1" @click="new_data('sd')">
                            		<span>湿度状态</span>
                            		<i></i>
                            		<h2 :style="{'color':color_data[1]}">{{test[3]}}RH</h2>
                        		</div>
                        		<div class="t_b_box2" @click="new_data('xh')">
                            		<span>信号状态</span>
                            		<i></i>
                            		<h2 :style="{'color':color_data[2]}">{{test[4]}}dBm</h2>
                        		</div>
                        		<div class="t_b_box3" @click="new_data('yw')">
                            		<span>烟雾状态</span>
                            		<i></i>
                            		<h2 :style="{'color':color_data[3]}">{{test[7]}}</h2>
                        		</div>
                        		<div class="t_b_box4" @click="new_data('zd')">
                            		<span>震动状态</span>
                            		<i></i>
                            		<h2 :style="{'color':color_data[4]}">{{test[6]}}</h2>
                        		</div>
                        		<div class="t_b_box5" @click="new_data('gm')">
                            		<span>光敏状态</span>
                            		<i></i>
                            		<h2 :style="{'color':color_data[5]}">{{test[5]}}</h2>
                        		</div>
                    		</main>
                    		<img class="t_r_line" src="/static/img/right_line.png" alt="">
            		</div>
				</div>
				<div class="bottom">
					<div class="b_left">
						<div class="b_left_box">
                    		<img class="t_l_line" src="/static/img/left_line.png" alt="">
                    		<h1 class="t_title">{{qy}}设备信息</h1>
                    		<table class="t_table">
                        		<thead>
                            		<tr>
                                		<th>设备编号</th>
                                		<th>设备位置</th>
                                		<th>北斗地址</th>
                            		</tr>
                        		</thead>
                        		<tbody>
                            		<tr>
                                		<td>{{sb[0]}}</td>
                                		<td>{{sb[1]}}</td>
                                		<td>{{sb[2]}}</td>
                            		</tr>
                            		<tr>
                                		<td></td>
                                		<td></td>
                                		<td></td>
                            		</tr>
                            		<tr>
                                		<td></td>
                                		<td></td>
                                		<td></td>
                            		</tr>
                        		</tbody>
                    		</table>
   	            		</div>	
						<div class="b_left_box1">
							<div>
                    			<h1 class="t_title">设备告警信息</h1>
                    			<table class="t_table">
                        			<thead>
                            			<tr>
                                			<th>告警区域</th>
                                			<th>告警设备位置</th>
                                			<th>告警信息</th>
                            			</tr>
                        			</thead>
                        			<tbody>
                            			<tr>
                                			<td></td>
                                			<td></td>
                                			<td></td>
                            			</tr>
                            			<tr>
                                			<td></td>
                                			<td></td>
                                			<td></td>
                            			</tr>
                            			<tr>
                                			<td></td>
                                			<td></td>
                                			<td></td>
                            			</tr>
                        			</tbody>
                    			</table>
                    		<img class="t_r_line" src="/static/img/right_line.png" alt="">
							</div>
   	            		</div>	
					</div>
					<div class="b_right">
						<div class="b_right_box">
                    		<img class="t_l_line" src="/static/img/left_line.png" alt="">
                    		<h1 class="t_title1" v-show="xx">
								<picker mode="date"  :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
									<picker mode="time" :value="time" start="00:00" end="23:00" @change="bindTimeChange">
										<button type="primary">历史数据查询:{{date}}   {{time}}</button>
									</picker>
								</picker>
							</h1>
                    		<img class="t_r_line" src="/static/img/right_line.png" alt="">
							<div id="ls" :style="{'top':top,'left':left}"></div>
						</div>
					</div>
				</div>
        	</main>
    </view>
</template>

<script>
import SM from "@/common/js/index.js"

export default {
	data() {
		// 获取当天日期
		// const currentDate = this.getDate({
        //     format: true
        // })
		return {
			top:"15%",
			left:"5%",
			//----------------右上角数据初始颜色
			color_data:["#fff","#fff","#fff","#fff","#fff","#fff"],
			//----------------------
			server_url:"http://127.0.0.1:8000",
			history:[],
			d_num:1,
			d_zx:1,
			xx:true,
			sb:["1号机","生产基地1号光交箱","961583","正常"],
			temp_test:[],
			test:[],
			qy:"宜秀区",
			jh_date:"1号机",
			date: "2022-04-14",
			time: '12:00',
			temp_num:0
		}
	},
	mounted(){
		SM.echart_3()
		SM.echart_4(70,"90AH")
		this.history_date(this.date,this.time)
	},

	onLoad() {
		this.init()
		setInterval(() => {this.temp_init()}, 1000);
	},

	computed: {
        startDate() {
            return this.getDate('start');
        },
        endDate() {
            return this.getDate('end');
        },
    },
	methods: {
		temp_init(){
			if(this.qy == "宜秀区"&this.jh_date=="1号机"){
				this.init()
				if(this.temp_test.length == 0){
					this.temp_test = this.test
				}else{
					if(this.temp_test[9]==this.test[9]){
						if(this.temp_num<=3){

							if(this.color_data[4]=="#fff"){
								for(let key1 in this.color_data){
									this.color_data[key1] = "yellow"
								}
								return
							}
							if(this.color_data[4]=="yellow"){
								for(let key1 in this.color_data){
									this.color_data[key1] = "#fff"
								}
								this.temp_num = this.temp_num + 1
								return
							}
						}

					}else{
						this.temp_num=0
						this.temp_test = this.test
						this.color_data=["yellow","yellow","yellow","yellow","yellow","yellow"]
						if(this.test[5]=="异常"){
							this.color_data[5]="red";
						}
						if(this.test[4]=="异常"){
							this.color_data[4]="red";
						}
					}
				}
			}
		},
		async init(){
			var temp1= await this.http(this.server_url)
			var temp = temp1['data']
			this.test = temp[0]
			if(temp[0][5]==1){
				this.test[5] = "正常"
			}else{
				this.test[5] = "异常"
			}
			if(temp[0][6]==1){
				this.test[6] = "正常"
			}else{
				this.test[6] = "异常"
			}
		},

		async history_date(date,time){
			var temp = [],a1 = [],a2 = [],a3 = [],a4 = [],a5 = [],a6 = [],a7 = []
			var temp1 = await this.http(this.server_url+"/history?date="+date+"&time="+time)
			temp = temp1['data']
			for(let key in temp){
        	    // console.log(key + '---' + temp[key] )
				for(let key1 in temp[key]){
        	    	// console.log(key1 + '---' + temp[key][key1])
        		}
        	}
			for(var j = 0,len=temp.length; j <= len+1; j++) {
				for(var i = 0,len = temp[j].length;i<=len+1;i++){
					if(i==2){
						a1.push(temp[j][i])
					}
					if(i==3){
						a2.push(temp[j][i])
					}
					if(i==4){
						a3.push(temp[j][i])
					}
					if(i==5){
						a4.push(temp[j][i])
					}
					if(i==6){
						a5.push(temp[j][i])
					}
					if(i==7){
						a6.push(temp[j][i])
					}
					if(i==9){
						a7.push(temp[j][i])
					}
				}
			}
			this.history.push(a1)
			this.history.push(a2)
			this.history.push(a3)
			this.history.push(a4)
			this.history.push(a5)
			this.history.push(a6)
			this.history.push(a7)
			SM.ls(this.history);
			this.history=[]
		},
		async xx_data(title){
			var temp = await this.http(this.server_url+"/xx?select="+title)
			SM.xx(title,temp['time'],temp['wd'])
		},

		http(url1){
			return new Promise((resolve,reject)=>{
			 uni.request({
				url:url1,
				method:"GET",
    		 	success: (res) => {
					var a = res.data
					resolve(a)
    		 	},
				fail:(err)=>{
					reject(err)
				}
			 });
			})
		},
		handclick(){
			this.top="15%";
			this.left="5%";
			this.qy=SM.qy()
			if(this.qy=="宜秀区"){
				this.init()
				this.d_num = 1;
				this.d_zx = 1;
				SM.echart_4(70,"90AH");
				this.sb=["1号机","生产基地1号光交箱","961583","正常"];
				this.history_date(this.date,this.time)
			}else{
				this.d_num=0;
				this.d_zx=0;
				SM.echart_4(0,0);
				this.sb.length=0;
				this.test=[0,0,0,0,0,"无","无","无","","无"]
				this.history_date("2021-01-01","00:00")
			}
		},
		jh(){
			this.jh_date = SM.jh()
			if(this.qy=="宜秀区"&this.jh_date=="1号机"){
				this.top="15%";
				this.left="5%";
				this.xx = true;
				this.history_date(this.date,this.time)
			}else{
				this.test=[0,0,0,0,0,"无","无","无","","无"]
				this.top="15%";
				this.left="5%";
				this.xx = true;
				this.history_date("2021-01-01","00:00")
			}
		},
		new_data(e){
			var title
			this.xx=false;
			this.top="5%";
			this.left="0";
			switch(e){
				case "wd": title="温度";break;
				case "sd": title="湿度";break;
				case "xh": title="信号";break;
				case "gm": title="光敏";break;
				case "zd": title="震动";break;
				case "yw": title="烟雾";break;
			}
			this.xx_data(title)
		},
		getDate(type) {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            if (type === 'start') {
                year = year - 60;
            }else if (type === 'end') {
                year = year + 2;
            }
            month = month > 9 ? month : '0' + month;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        },
		bindDateChange: function(e) {
         	this.date = e.detail.value
        },
		bindTimeChange: function(e) {
            this.time = e.detail.value
			this.history_date(this.date,this.time)
        },
	}
}
</script>
<style>
@import "/common/css/index.css";
</style>
